<template>
  <VuePsTree ref="VuePsTree" :tree-comp-data="treeComp" @onTreeCheck="onTreeCheck" @onTreeClick="onTreeClick"/>
</template>
<script>
import VuePsTree from '@/components/psTree/vuePsTree'

export default {
  components: { VuePsTree },
  props: {
    treeData: { default: () => [] },
    value: { default: () => [] },
    isCheck: { default: false, type: Boolean }, // ztree是否显示复选框
    isPersonCheck: { default: false, type: Boolean },   // 是否只能选择人员
  },
  watch: {
    treeData: {
      handler(nv) {
        // 设置某个节点不显示复选框
        function setNocheck(arr) {
          arr.forEach(item => {
            if(item.children) {
              item.nocheck = true
              setNocheck(item.children)
            }
          })
        }
        //将根节点设为不可选
        nv.length?nv[0].nocheck = true:''
        // 展开第一个
        if (nv[0]) nv[0].open = true
        // 在平日记录里只能选择人员, 这里让ztree不显示部门的复选框
        if(this.isPersonCheck) setNocheck(nv)

        this.treeComp.treeData = nv
      },
      immediate: true
    }
  },
  data() {
    return {
      // 递归树数据
      treeComp: {
        name: '', // 填写标注
        treeData: [],

        treeBuildConfig: {
          iconMap: {
            fl_tag: 'tree-icon icon-fl_tag',
            meta_same: 'tree-icon icon-meta_same',
            leaf: 'tree-icon icon-leaf',
            menu_formman_cls: 'tree-icon icon-menu_formman_cls'
          },
          dataFilter: this.dataFilterBd,
          options: {
            data: {
              key: { name: 'label' },
              simpleData: { enable: false, idKey: 'id', pIdKey: 'pId', rootPId: 0 }
            },
            view: { showIcon: true },
            check: {
              /**
               Y 属性定义 checkbox 被勾选后的情况；
               N 属性定义 checkbox 取消勾选后的情况；
               "p" 表示操作会影响父级节点；
               "s" 表示操作会影响子级节点。
               请注意大小写，不要改变
               */
              chkboxType: { 'Y': '', 'N': '' },
              enable: this.isCheck
            }
          },
          isEdit: false,
          isDrag: false
        }
      },
    }
  },
  methods: {
    // 每次点击 复选框时触发
    onTreeCheck() {
      const checkedNodes = this.$refs.VuePsTree.$refs.tree.ztreeObj.getCheckedNodes()
      const selectedList = checkedNodes.map(x => ({ id: x.id, type: x.type, label: x.label }))
      this.$emit('input', selectedList)   // 发送的参数是已选中的所有人员 --数据格式是:对象数组
    },

    // 每次点击 label 时触发
    onTreeClick(event, treeId, treeNode) {
      this.$emit('onTreeClick', treeNode)
    }
  }
}
</script>

<style scoped lang="scss">

::v-deep .node_name {
  font-size: 16px;
}

</style>
